<template>
  <div v-if="!item.hidden">
    <template v-if="!item.hidden && item.menuType == 1">
      <app-link v-if="item.routePath" :to="item.routePath">
        <el-menu-item :index="getRealPath(item.routePath)" :class="{ 'submenu-title-noDropdown': !isNest }">
          <span>&nbsp;&nbsp;&nbsp;</span>
          <template #title>
            <span class="menu-title" :title="hasTitle(item.name)">
              {{ item.name }}
            </span>
          </template>
        </el-menu-item>
      </app-link>
    </template>

    <el-sub-menu v-else ref="subMenu" :index="getRealPath(item.routePath)" teleported>
      <template #title>
        <Icon v-if="item.icon" :icon='item.icon' :size='16'/>
        <span class="menu-title" :title="hasTitle(item.name)">{{ item.name }}</span>
      </template>
      <sidebar-item
          v-for="(child, index) in item.children"
          :key="child.routePath + index"
          :is-nest="true"
          :item="child"
          class="nest-menu"
      />
    </el-sub-menu>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import AppLink from './Link.vue'
import Icon from '@/components/common/icon/index.vue'
import {VAR_TAG} from "@/stores/conf";

defineProps({
  item: {
    type: Object,
    required: true
  },
  isNest: {
    type: Boolean,
    default: false
  },
})

const getRealPath = (path: any) => {
  return path.replace(VAR_TAG, '')
}

const hasTitle = (title: any) => {
  if (title.length > 1) {
    return title;
  } else {
    return "";
  }
}

</script>
